<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<script>
  var ObjectId = 'objectid'
  var String = 'string'
  var Number = 'number'
  var Date = 'date'

  function parse(content) {
    eval(`var schema = ${content}`)
    var dict = {}
    var searchOption = []
    const rules = {}
    var details = `
    <el-row :gutter="20">
    `
    var table = `
<template slot="tableRows">`
    Object.keys(schema).forEach((key, index) => {
      var value = schema[key]
      var array = false
      // 是数组
      if (Array.isArray(value)) {
        array = true
        value = value[0]
      }
      dict[key] = value && value.remark
      if (index < 3) {
        searchOption.push({
          key,
          label: value.remark,
        })
      }

      // rules
      if (value.required) {
        rules[key] = [
          { required: true, message: `请${array ? '选择' : '填写'}${value.remark}` },
        ]
      }
      // table
      table += `
     <el-table-column prop="${value.ref ? key + '.name' : key}" label="${value.remark}"></el-table-column>
      `

      var input = ''
      switch (value.type) {
        // select
        case 'objectid' || array:
          input = `
          <emq-select
            v-model="record.${key}"
            :field="{ url: '/${value.ref}', key: '${key}' }"
            :record="record"
            :disabled="disabled">
          </emq-select>`
          break
        case 'number':
          input = `<el-input v-model.number="record.${key}"></el-input>`
          break
        default:
          input = `<el-input v-model="record.${key}"></el-input>`
          break
      }
      details += `
      <el-col :span="12">
        <el-form-item label="${value.remark}" prop="${key}">
            ${input}
        </el-form-item>
      </el-col>
      `

    })

    // table end
    table += `
    <el-table-column prop="createdAt" label="创建时间">
      <template slot-scope="props">
        {{ props.row.createdAt | date }}
      </template>
    </el-table-column>
</template>
    `

    // details
    details += `
</el-row>
    `
    console.log(JSON.stringify(dict, null, 2))
    console.log(`const { ${Object.keys(dict).join(', ')} } = ctx.request.body`)
    // console.log(schema)
    console.log(table)
    console.log(JSON.stringify(searchOption, null, 2))

    console.log(details)


    console.log('\n\n')
    console.log('rules:', JSON.stringify(rules, null, 2))
  }
</script>
</body>
</html>